<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/address.css" />
</head>
<body class="gray">
	<div class="mui-content">
	    <ul class="mui-table-view addressList loading" id="vueMain" style="margin-top: 0px; border-top: 0 none;">
	    		<div v-if="list.length<1">
	    			您现在还没有地址！
	    		</div>
		    	<template v-else v-for="(item, index) in list">
		        <li class="mui-table-view-cell mui-media">
		        		<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red removeAddress" :data-id="item.address_id">删除</a>
					</div>
					<div class="mui-slider-handle">
			            <a href="javascript:;">
			                <img class="mui-media-object mui-pull-right link" src="../icon/edit.png" _id="newadd" _title="编辑地址" _href="newadd.html" :_extras="'ads_id='+item.address_id" />
			                <div class="mui-media-body " :data-idx="index" v-bind:class="item.is_default==1?'active':''">
			                    {{item.name}}<span>{{item.mobile}}</span>
			                    <p class="mui-ellipsis">{{item.province_name}} {{item.city_name}} {{item.area_name}} {{item.address}}</p>
			                </div>
			            </a>
		           </div>
		        </li>
	        </template>
	    </ul>
	    
	    <div class="mui-content-padded">
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block link" _id="newadd" _title="新建地址" _href="newadd.html">新建地址</button>
	   </div>
	    
	</div>
	
	
	
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, user;
	mui.init()
	mui.plusReady(function () {
		views = bexta.getWebview();
		user = bexta.getStorage(USER);
		bexta.ajax(api.address_list, function(res){
			initVue(res);
		}, {data:{uid:user.uid}});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:res
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				//设定默认地址
				mui('#vueMain').on('tap', '.mui-media-body', function(){
					var idx = this.getAttribute('data-idx');
					mui.each(apps.list, function(){
						 this.is_default = 0;
					})
					apps.list[idx].is_default = 1;
					var out = mui.extend({uid:user.uid}, apps.list[idx]);
					bexta.ajax(api.save_ads, function(res){
						
					},{data:out});
				});
				
				mui('#vueMain').on('tap', '.removeAddress', function(){
					var aid = this.getAttribute('data-id');
					var li = this.parentNode.parentNode;
					bexta.ajax(api.del_address, function(res){
						if( res.isError == 0 ){
							mui.toast(res.msg);
							mui.swipeoutClose(li);
							mui.each(apps.list, function(index){
								if( this.address_id == aid ){
									apps.list.splice(index, 1);
								}
							});
						}
					}, {data:{uid:user.uid,address_id:aid}});
				});
				
			}
		});
	}
window.addEventListener('updateAddress', function(evt){
	var ads = evt.detail.address, active = false;
	apps.list = ads;
//	mui.each(apps.list, function(index){
//		if( ads[0].id == this.id ){
//			active = true;
//			Vue.set(apps.list, index, ads[0]);
//		}
//	});
//	if(!active){
//		apps.list.push( ads[0] );
//	}
	
});
</script>
</body>
</html>